import { VC, Component } from '@/VC-vue'
import './style.less'
import noNotice from '_as/no_notice.png'
import { GlobalStore } from '../../store/global'

@Component({})
export default class Notice extends VC {
    $refs!: {
        noticeRef: any
    }
    navigateTo() {
        this.$router.push({
            path: '/'
        })
    }
    get message() {
        const type =
            GlobalStore.noticeInfo.employStatus == 'R' ? '待审核' : '退回修改'
        return `新增${this.noticeNum}名员工${type},点击查看`
    }
    get noticeNum() {
        return GlobalStore.noticeInfo.noticeNum + 1
    }
    mounted() {
        GlobalStore.getNoticeInfo()
    }
    render() {
        return (
            <a-popover
                trigger="click"
                overlayClassName="header-notice-wrapper"
                getPopupContainer={() => this.$refs.noticeRef.parentElement}
                autoAdjustOverflow={true}
                arrowPointAtCenter={true}
                placement="bottomRight"
                overlayStyle={{ width: '300px', top: '50px' }}
            >
                <div slot="content">
                    <a-list>
                        <a-list-item>
                            {this.noticeNum == 0 ? (
                                <a-list-item-meta
                                    title="暂无待办事项"
                                    description="现在"
                                >
                                    <a-avatar
                                        style="background:white;width:75px"
                                        size={64}
                                        shape="square"
                                        slot="avatar"
                                        src={noNotice}
                                    />
                                </a-list-item-meta>
                            ) : (
                                <a-list-item-meta
                                    description="现在"
                                    title={this.message}
                                    onclick={this.navigateTo}
                                >
                                    <a-avatar
                                        style="background-color: #fff"
                                        slot="avatar"
                                        src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"
                                    />
                                </a-list-item-meta>
                            )}
                        </a-list-item>
                    </a-list>
                </div>
                <span class="header-notice is_flex" ref="noticeRef">
                    <a-badge count={this.noticeNum}>
                        <a-icon
                            style="font-size: 20px; padding: 4px;color: rgb(153, 153, 153);"
                            type="bell"
                        />
                    </a-badge>
                </span>
            </a-popover>
        )
    }
}
